React App Routing with Wouter — Route Changes, Switches, and Links

Wouter is a library that lets us loading React components according to URLs.

In this article, we’ll look at how to add routing to a React app with Wouter.

Watch Router Changes with useRouter

We can use the useRouter hook to watch for changes to the router object.

For instance, we write:

import React, { useEffect } from "react";
import { Link, Route, Router, useRouter } from "wouter";

const InboxPage = () => {
  return (
    <div>
      <p>inbox</p>
    </div>
  );
};

export default function App() {
  const router = useRouter();

  useEffect(() => {
    console.log(router);
  }, [router]);

  return (
    <div>
      <Link href="/inbox">
        <a>Inbox</a>
      </Link>
      <Router>
        <Route path="/about">
          <p>About Us</p>
        </Route>
        <Route path="/users/:name">
          {(params) => <div>Hello, {params.name}!</div>}
        </Route>
        <Route path="/inbox" component={InboxPage} />
      </Router>
    </div>
  );
}

We use the useEffect hook to watch for router changes.

router has the hook property, which is the useLocation hook by default.

Also, we can add our own properties to the router object to pass data between routes

Route Component

We can use the Route component to define routes.

For instance, we write:

import React, { useEffect } from "react";
import { Link, Route, Router, useRouter } from "wouter";

const InboxPage = () => {
  return (
    <div>
      <p>inbox</p>
    </div>
  );
};

export default function App() {
  return (
    <div>
      <Link href="/inbox">
        <a>Inbox</a>
      </Link>
      <Router>
        <Route path="/about">
          <p>About Us</p>
        </Route>
        <Route path="/users/:name">
          {(params) => <div>Hello, {params.name}!</div>}
        </Route>
        <Route path="/inbox" component={InboxPage} />
      </Router>
    </div>
  );
}

We add the Route component and set the path prop to define the routes.

:name is a URL parameter placeholder.

And we can get its value from the params parameter.

Link Component

The Link component lets us add links to let us navigate to different pages.

For instance, we write:

import React, { useEffect } from "react";
import { Link, Route, Router, useRouter } from "wouter";

const InboxPage = () => {
  return (
    <div>
      <p>inbox</p>
    </div>
  );
};

export default function App() {
  return (
    <div>
      <Link href="/about">
        <a>About</a>
      </Link>
      <Router>
        <Route path="/about">
          <p>About Us</p>
        </Route>
        <Route path="/users/:name">
          {(params) => <div>Hello, {params.name}!</div>}
        </Route>
        <Route path="/inbox" component={InboxPage} />
      </Router>
    </div>
  );
}

to add a link to go to the About page when we click it.

Switch Component

The Switch component lets us add exclusive routing into our React app.

It makes sure that only one route is rendered at a time.

For instance, we write:

import React from "react";
import { Link, Route, Switch } from "wouter";

const AllOrders = () => {
  return (
    <div>
      <p>all orders</p>
    </div>
  );
};

const Orders = ({ params }) => {
  return (
    <div>
      <p>orders {params.status}</p>
    </div>
  );
};

export default function App() {
  return (
    <div>
      <Link href="/orders/all">
        <a>All</a>
      </Link>
      <Switch>
        <Route path="/orders/all" component={AllOrders} />
        <Route path="/orders/:status" component={Orders} />
      </Switch>
    </div>
  );
}

We put the Route components in a Switch so that we only AllOrders or Orders but never both together.

In Orders , we get the URL parameters from the params prop.

Conclusion

We can add exclusive routes and watch for router changes in our React app with Wouter.